<template>
  <div class="main" >
    <TopNav :title="$route.meta.title"></TopNav>
<div v-if="show">
  <div class="goods_group" >
      <van-swipe-cell v-for="item in list" :key="item.cartItemId">
        <div class="goods_item">
          <div class="goods_checked">
            <van-checkbox v-model="item.checked" icon-size="18px" />
          </div>
          <div class="goods_img">
            <img width="100px" :src="item.goodsCoverImg" alt="" />
          </div>
          <div class="goods_desc">
            <p class="goods_title">
              <span>{{ item.goodsName }}</span>
              <span>x{{ item.goodsCount }}</span>
            </p>
            <div class="goods_btn">
              <p>￥{{ item.sellingPrice }}</p>
              <van-stepper
                :name="item.cartItemId"
                v-model="item.goodsCount"
                @change="changeNumber"
              ></van-stepper>
            </div>
          </div>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="removeGoods(item.cartItemId)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="nothing"></div>
    <footer>
      <van-submit-bar
        :price="allPrice"
        button-text="提交订单"
        @submit="goDingDan"
      >
        <van-checkbox v-model="checkAll">全选</van-checkbox>
      </van-submit-bar>
    </footer>
</div>
<div v-if="show2" class="cartNoGoods">
  <van-icon name="smile-o" size="1.5rem" />
  <p style="fontSize:.5rem">购物车空空如也</p>
  <van-button
   type="primary"
    style="width:5rem;left: -.7rem; margin-top: .2rem;"
    color="rgb(27,174,174)"
    @click="$router.push('/Home')"
    > 前往首页 </van-button>
</div>
<div>
</div>
  </div>
</template>

<script>
import { deleteCartList, changeGoodsNumber } from "@/api/index";
import TopNav from "@/components/topNav.vue";
export default {
  name: "Cart",
  created() {
    this.$store.dispatch("changeCartListAsync"); //进来就获取购物车的数据
  },
  data() {
    return {
      show:false,
      show2:false
    };
  },
  methods: {
    //提交商品订单
    onSubmit() {},
    //删除商品
    removeGoods(id) {
      deleteCartList(id).then(() => {
        this.$store.dispatch("changeCartListAsync"); //重新获取购物车数据
      });
    },
    //商品数量改变
    changeNumber(value, detail) {
      changeGoodsNumber({
        cartItemId: detail.name,
        goodsCount: value,
      }).then((data) => {
        console.log(data);
      });
    },
    goDingDan() {
      if (this.list.some((item) => item.checked)) {
        let a = [];
        for (let i = 0;i < this.list.filter((item) => item.checked).length;i++) {
          a.push(this.list.filter((item) => item.checked)[i].cartItemId);
        }
        localStorage.setItem("cartItemIds", a);
        this.$router.push("/createOrder");
      } else {
        this.$toast("你没有选择任何商品");
      }
    },
  },
  components: { TopNav },
  computed: {
    list() {
      return this.$store.state.cartList;
    },
    allPrice() {
      return this.list.reduce((prev, cur) => {
        return (
          prev + (cur.checked ? cur.goodsCount * cur.sellingPrice * 100 : 0)
        );
      }, 0);
    },
    checkAll: {
      get() {
        return this.list.every((item) => item.checked);
      },
      set(val) {
        this.list.forEach((item) => {
          item.checked = val;
        });
      },
    },
  },
  watch:{
    list(){
      if (this.list.length>0) {
        this.show=true
        this.show2=false
      }else{
        this.show2=true
        this.show=false
      }
    }
  }
};
</script>


<style scoped lang="less">
  body{
    height: 100%;
    position: relative;
  }
.main {
  width: 100%;
  top: 0;
  bottom: 0px;
  margin: 1.6rem auto 0;
  .goods_group {
    padding-left: 0.26667rem;
    margin-bottom: 5rem;
    .goods_item {
      display: flex;
      align-items: center;
      .goods_desc {
        width: 100%;
        padding: 0.53333rem;
        font-size: 0.16rem;
        .goods_title {
          display: flex;
          justify-content: space-between;
        }
        .goods_btn {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
  .cartNoGoods{
    width: 6rem;
    height: 6rem;
    position: absolute;
    margin: 0 auto;
    top:6rem;
    left: 3rem;
    .van-icon{
      left: 1rem;
    }
  }
}
.van-submit-bar {
  bottom: 48px;
}
.nothing{
  height: 0.01rem;
}
</style>